<template>
	<view class="page">
		<u-navbar autoBack leftIconColor="#232832" bgColor="#FFFFFF"></u-navbar>
		<c-content :top="statusBarHeight + 44" padding="0 22px">
			<view class="title">注册</view>
			<view class="subtitle">注册以获得服务</view>
			<view class="form">
				<u-form :model="form" :rules="rules" ref="form">
					<u-form-item prop="username">
						<u-input placeholder="用户名" v-model="form.username" maxlength="20" prefixIcon="account" border="none"
							color="#232832" customStyle="background-color: #F4F4F7;padding: 6px 14px 6px 8px;"></u-input>
					</u-form-item>
					<u-form-item prop="password">
						<u-input v-model="form.password" :type="pwd ? 'text' : 'password'" prefixIcon="lock" placeholder="密码"
							clearable maxlength="20" border="none" color="#232832"
							customStyle="background-color: #F4F4F7;padding: 6px 14px 6px 8px;">
							<template #suffix>
								<view @click="pwd = !pwd">
									<u-icon :size="20" name="eye-fill" color="#232832" v-if="!pwd"></u-icon>
									<u-icon :size="20" name="eye-off" color="#232832" v-else></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
				</u-form>				<view class="btn">注册</view>
				<u-divider text="第三方登陆" textColor="#232832"></u-divider>
				<view class="other-login">
					<view class="lgoniBtn phone" @click="goLogin('0')">
						<text class="icon-phone"></text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="lgoniBtn wx" @click="goLogin('2')">
						<text class="icon-weixin"></text>
					</view>
					<!-- #endif -->
				</view>
				<view class="bottom" :style="{bottom: `${safeAreaBottom + 20}px`}">
					已有账号？<text @click="goLogin('1')">登陆</text>
				</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				pwd: false,
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名'
					}],
					password: [{
						required: true,
						message: '请输入密码'
					}]
				}
			}
		},
		methods: {
			goLogin(type) {
				let url = ''
				if (type == '0') {
					url = '/pages/login/phone'
				} else if (type == '1') {
					url = '/pages/login/account'
				} else if (type == '2') {
					uni.login({
						provider: 'weixin',
						success: ({
							code
						}) => {
							this.$request.post('/login', {
								code,
								type: 'wx'
							}).then(res => {
								if (res.code === 200) {
									uni.store.dispatch('STORE_USER_INFO', res.data)
								}
							})
						}
					})
				}
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		margin-top: 30px;
		color: #232832;
		font-size: 26px;
		line-height: 34px;
		font-weight: 700;
	}

	.subtitle {
		margin-top: 10px;
		color: #939393;
		font-size: 13px;
		line-height: 18px;
		font-weight: 500;
	}

	.form {
		margin-top: 40px;
	}

	.btn {
		margin: 30px 0;
		background-color: #6E86FF;
		padding: 10px 0;
		border-radius: 8px;
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
	}

	.other-login {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;

		&>view {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 20px;
			height: 20px;
			border-radius: 50%;
			padding: 10px;
			margin: 10px 20px;
		}

		.phone {
			background-color: #FFB752;
		}

		.wx {
			background-color: #44BE3C;
		}
	}

	.bottom {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #939393;
		font-size: 13px;
		line-height: 18px;
		font-weight: 500;

		text {
			color: #6E86FF;
		}
	}
</style>